@import "~styles/_global.scss";

.tooltip {
  @include setFontSize($size-14);
  @include setPadding($size-10, $size-10, $size-10, $size-10);

  font-weight: $font-weight-400;
  text-transform: none;
  letter-spacing: normal;
  color: $light-grey;
  box-sizing: border-box;
  box-shadow: $size-0 $size-2 $size-10 $black-10;
  border-radius: $size-4;
  background: $black-70;
  width: 150px;
  display: none;
  position: absolute;
  z-index: $z-index-front;
  top: calc(10px + 100%);
  text-align: center;

  &Wrapper {
    display: inline-block;
    position: relative;
  }

  &Element {
    &:hover + div,
    &:focus-within + div {
      display: inline;
    }
  }

  &Right {
    right: 0;
  }

  &Center {
    left: calc(50% - 100px);
  }
}
